<template>
  <div class="contaienr">
    <div class="guide">
      <div class="title">
        <p>智慧管控平台</p>
        <p class="sub-title">Intelligent Platform Management Interface</p>
      </div>
      <div class="guide-main">
        <div class="guide-menu inner">
          <div class="scene">
            <div class="carousel" ref>
              <div
                class="carousel__cell"
                :class="{'active':activeIndex === 0}"
                @mousedown.prevent="move"
              >
                <div class="menu-box">
                  <router-link to="/home/1">
                    <p>
                      <span class="iconfont icon_renlianshibie"></span>
                    </p>人脸识别
                  </router-link>
                </div>
              </div>
              <div
                class="carousel__cell"
                :class="{'active':activeIndex === 1}"
                @mousedown.prevent="move"
              >
                <div class="menu-box">
                  <router-link to="/home/4">
                    <p>
                      <span class="iconfont iconwebicon06"></span>
                    </p>基础管理
                  </router-link>
                </div>
              </div>
              <div
                class="carousel__cell"
                :class="{'active':activeIndex === 2}"
                @mousedown.prevent="move"
              >
                <div class="menu-box">
                  <router-link to="/home/2">
                    <p>
                      <span class="iconfont iconfangke"></span>
                    </p>访客管理
                  </router-link>
                </div>
              </div>
              <div
                class="carousel__cell"
                :class="{'active':activeIndex === 3}"
                @mousedown.prevent="move"
              >
                <div class="menu-box">
                  <router-link to="/home/0">
                    <p>
                      <span class="iconfont iconcheliang-"></span>
                    </p>车辆管理
                  </router-link>
                </div>
              </div>
              <div
                class="carousel__cell"
                :class="{'active':activeIndex === 4}"
                @mousedown.prevent="move"
              >
                <div class="menu-box">
                  <router-link to="/home/3">
                    <p>
                      <span class="iconfont icontixing"></span>
                    </p>RFID管理
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="guide-hand">
          <img src="../assets/image/hand.png" alt />
        </div>
        <div class="menu-close">
          <router-link to="/home">
            <img src="../assets/image/menu_close.png" alt />
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // hbgUrl: Hbg,
      // bgUrl: Bg,
      activeIndex: 0,
      carousel: null,
      cellCount: 5,
      selectedIndex: 0,
      cellWidth: 0,
      cellHeight: 0,
      isHorizontal: true,
      rotateFn: "rotateY",
      radius: null,
      theta: null,
      title: [
        "运行驾驶舱",
        "移动应用分析",
        "检务工作分析",
        "人大工作分析",
        "律师工作分析",
        "智慧办案"
      ]
    };
  },
  mounted() {
    this.carousel = document.querySelector(".carousel");
    this.cellWidth = this.carousel.offsetWidth;
    this.cellHeight = this.carousel.offsetHeight;
    this.changeCarousel();
  },
  methods: {
    move(e) {
      let odiv = e.target; //获取目标元素
      console.log(odiv);
      var a1 = e.screenX;
      odiv.onmouseup = e => {
        var a2 = e.screenX;
        let range = a1 - a2;
        var left = false;
        var right = false;
        if (range > 6) {
          right = true;
          console.log('大于4')
        } else if (range < -6) {
          left = true;
           console.log('小于4')
        }
        if (right) {
          console.log("左滑啊");
          this._next();
          left = false;
          right = false;
        }
        if (left) {
          console.log("右滑啊");
          this._pre();
          left = false;
          right = false;
        }
      };
    },
    _close() {
      this.$router.go(-1);
    },
    _pre() {
      if (this.activeIndex === 0) {
        this.activeIndex = this.cellCount - 1;
      } else {
        this.activeIndex--;
      }
      this.selectedIndex--;
      this.rotateCarousel();
    },
    _next() {
      if (this.activeIndex === this.cellCount - 1) {
        this.activeIndex = 0;
      } else {
        this.activeIndex++;
      }
      this.selectedIndex++;
      this.rotateCarousel();
    },
    rotateCarousel() {
      let angle = this.theta * this.selectedIndex * -1;
      this.carousel.style.transform =
        "translateZ(" +
        -this.radius +
        "px) " +
        this.rotateFn +
        "(" +
        angle +
        "deg)";
    },
    changeCarousel() {
      this.theta = 360 / this.cellCount;
      let cellSize = this.isHorizontal ? this.cellWidth : this.cellHeight;
      let cells = document.querySelectorAll(".carousel__cell");
      this.radius = Math.round(
        cellSize / 2 / Math.tan(Math.PI / this.cellCount)
      );
      for (let i = 0; i < cells.length; i++) {
        let cell = cells[i];
        if (i < this.cellCount) {
          // visible cell
          cell.style.opacity = 1;
          let cellAngle = this.theta * i;
          cell.style.transform =
            this.rotateFn +
            "(" +
            cellAngle +
            "deg) translateZ(" +
            this.radius +
            "px)";
        } else {
          // hidden cell
          cell.style.opacity = 0;
          cell.style.transform = "none";
        }
      }
      this.rotateCarousel();
    }
  },
  destroyed() {},
  watch: {}
};
</script>

<style scoped lang="scss">
@mixin prefix-content($content-name, $content-txt) {
  #{$content-name}: $content-txt;
  -webkit-#{$content-name}: $content-txt;
  -o-#{$content-name}: $content-txt;
  -moz-#{$content-name}: $content-txt;
}
.menu-box {
  width: 230px;
  height: 250px;
  background: url("../assets/image/guide_menu_back.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 16px;
  p {
    span {
      font-size: 70px;
      color: white;
    }
  }
  font-size: 36px;
  color: white;
  text-align: center;
}
.contaienr {
  background-color: rgb(0, 0, 32);
  width: 100vw;
  height: 100vh;
}
.guide {
  background: url("../assets/image/guide_back.png");
  width: 1600px;
  height: 1000px;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
}
.title {
  height: 100px;
  font-size: 38px;
  color: #00ffff;
  text-align: center;
  padding: 60px 0 0 0;
  p {
    margin: 0;
  }
}
.guide-main {
  position: relative;
  height: 900px;
}
.guide-hand {
  width: 820px;
  position: absolute;
  bottom: 140px;
  left: 395px;
  z-index: 0;
  img {
    width: 100%;
  }
}
.menu-close {
  position: absolute;
  left: 700px;
  bottom: 0;
  cursor: pointer;
  z-index: 11;
  a {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1645px;
  height: 995px;
  background-size: auto 100%;
  background-position: center;
  position: relative;
  z-index: 10;
  .scene {
    position: relative;
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    perspective: 1200px;
  }
  .carousel {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(-288px);
    transform-style: preserve-3d;
    transition: transform 1s;
  }
  .carousel__cell {
    position: absolute;
    width: 800px;
    height: 500px;
    left: 101px;
    top: -34px;
    transition: transform 1s, opacity 1s;
    box-sizing: border-box;
    background-color: transparent;
    border: 19px solid transparent;
    border-radius: 30px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    @include prefix-content(transition, all 1s);

    &.active {
      // border-color:rgba(70,114,255,0.3);
      // background-color: rgba(70, 114, 255, 0.3);
      z-index: 20;
      img {
        // background-color: rgba(70,114,255,0.3);
        filter: none;
        -webkit-filter: none;
        // border-radius: 30px;
      }
    }
    a {
      color: white;
      width: 100%;
      height: 100%;
      text-decoration: none;
    }
    img {
      background-color: transparent;
      width: 100%;
      height: 100%;
      // filter: blur(2px);
      // -webkit-filter: blur(2px);
    }
  }
  // .arrow-pre,
  // .arrow-next {
  //   width: 120px;
  //   height: 60px;
  //   background-color: transparent;
  //   background-image: url("../assets/images/guide/left.png");
  //   background-size: 100%;
  //   outline: none;
  //   border: none;
  //   background-size: 100% 100%;
  //   cursor: pointer;
  // }
  // .arrow-next {
  //   background-image: url("../assets/images/guide/right.png");
  // }
  // .close {
  //   position: absolute;
  //   bottom: 80px;
  //   left: 50%;
  //   margin-left: -60px;
  //   width: 120px;
  //   height: 60px;
  //   background-image: url("../assets/images/guide/close.png");
  //   background-size: 100%;
  //   cursor: pointer;
  // }
}
</style>
